<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <!-- IE 浏览器运行最新的渲染模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 启用响应式特性 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 双核使用webkit内核 -->
    <meta name="renderer" content="webkit">
    <title>旅游网</title>
    <link href="../../../css/flight/bootstrap.min.css" rel="stylesheet">
    <link href="../../../css/flight/common.css" rel="stylesheet">
    <link href="../../../css/flight/corptravel.css" rel="stylesheet">
    <link href="../../../css/flight/enterprise.css" rel="stylesheet">
    <!--<link href="../../../js/icheck/skins/all.css" rel="stylesheet" type="text/css">-->
    <!-- IconFont图标 -->
    <link href="../../../css/flight/iconfont.css" rel="stylesheet">
    <script type="text/javascript" src="../../../js/flight/jquery-1.9.1.min.js"></script>
    <script src="../../../js/flight/bootstrap.min.js"></script>

    <script type="text/javascript" src="../../../js/flight/layer/layer.js"></script>
    <!-- 日历控件 -->
    <script language="javascript" type="text/javascript"
            src="../../../js/flight/My97DatePicker/WdatePicker.js"></script>

    <!-- TAB -->
    <script type="text/javascript" src="../../../js/flight/base.js"></script>
    <script>
        $(document).ready(function () {

            $("#bank-change li").first().prepend("<span class='ico-bank-change'></span>");
            $("#bank-change li").click(function () {
                $(this).prepend("<span class='ico-bank-change'></span>");
                $(this).siblings().children("span.ico-bank-change").remove();
                $(this)
            });
            $("#bank-change2 li").click(function () {
                $(this).prepend("<span class='ico-bank-change'></span>");
                $(this).siblings().children("span.ico-bank-change").remove();
                $(this)
            })


        });
    </script>
</head>
<body>
<!-- header -->
<nav class="navbar navbar-default navbar-fixed-top bg-white">
    <jsp:include page="../flight-header.jsp"/>
<!-- header end -->

<div class="container bg-white box-shadow pad-15 mar-bottom-30" style="margin-top:120px;">
    <!-- 航班信息 -->
    <h3 class="mar-bottom-20">航班信息 <span class="label label-primary font12 mar-left-10" style=" vertical-align:middle;">往返</span>
    </h3>
    <div class="lh30 pad-10 bg-gray-f5">
        <ul class="list-inline ">
            <li class="w-percentage-20"><b class="font16">成都 — 乌鲁木齐</b></li>
            <li class="w-percentage-15">南航 CZ1252</li>
            <li class="w-percentage-15">S舱(250折)</li>
            <li class="w-percentage-20"><b class="font16">2015-08-27 06:45</b> 起飞</li>
            <li class="w-percentage-20"><b class="font16">2015-08-27 12:45</b> 到达</li>
        </ul>
        <ul class="list-inline ">
            <li class="w-percentage-20"><b class="font16">乌鲁木齐 — 成都</b></li>
            <li class="w-percentage-15">南航 CZ1252</li>
            <li class="w-percentage-15">S舱(250折)</li>
            <li class="w-percentage-20"><b class="font16">2015-08-27 06:45</b> 起飞</li>
            <li class="w-percentage-20"><b class="font16">2015-08-27 12:45</b> 到达</li>
        </ul>
    </div>
    <!-- 航班信息 结束 -->

    <!-- 旅客信息 -->
    <h3 class="mar-bottom-20">订单信息 <small class="mar-left-20 font14">乘客人数：5 人</small></h3>
    <div class="lh30 ">
        <div class=" bor-bottom-solid-d8-1 bor-top-solid-1">
            <ul class="list-inline ">
                <li class="w-percentage-25">成人1：詹远强</li>
                <li class="w-percentage-25">身份证：510301198808085555</li>
                <li class="">手机：13855559999</li>
            </ul>
            <ul class="list-inline ">
                <li class="w-percentage-25">结算价：1000（票面价：1100.0）</li>
                <li class="w-percentage-25">机建/燃油/服务费：50/0/0</li>
                <li class=""><b>中国人保 20元旅游航意险（10天）</b> 20元</li>
                <li class="pull-right">合计：<b>1058</b></li>
            </ul>
        </div>
        <div class=" bor-bottom-solid-d8-1 bor-top-solid-1">
            <ul class="list-inline ">
                <li class="w-percentage-25">成人1：詹远强</li>
                <li class="w-percentage-25">身份证：510301198808085555</li>
                <li class="">手机：13855559999</li>
            </ul>
            <ul class="list-inline ">
                <li class="w-percentage-25">结算价：1000（票面价：1100.0）</li>
                <li class="w-percentage-25">机建/燃油/服务费：50/0/0</li>
                <li class=""><b>中国人保 20元旅游航意险（10天）</b> 20元</li>
                <li class="pull-right">合计：<b>1058</b></li>
            </ul>
        </div>

        <div class=" pull-right mar-top-10">支出金额：<span class="rmb orange-f60">￥</span><span
                class=" orange-f60 text-right font24">1916</span></div>
        <div class="clearfix"></div>
    </div>

    <!-- 旅客信息 结束 -->

    <!-- 支付选择 -->
    <div class="tabbable">
        <ul class="nav nav-tabs mar-bottom-20">
            <li class="active"><a href="#tab2" data-toggle="tab">第三方支付</a></li>
            <li><a href="#tab1" data-toggle="tab">银行卡</a></li>
            <!--<li><a href="#tab3" data-toggle="tab">pos机信息维护</a></li>-->
        </ul>
        <!--list 01-->
        <div class="tab-content">
            <div class="tab-pane bank-block-list2" id="tab1">
                <ul id="bank-change" style=" width:90%; margin-left:auto; margin-right:auto;">
                    <li><img src="../../../images/flight/wallet/ico-bank/1.gif"></li>
                    <li><img src="../../../images/flight/wallet/ico-bank/2.gif"></li>
                    <li><img src="../../../images/flight/wallet/ico-bank/3.gif"></li>
                    <li><img src="../../../images/flight/wallet/ico-bank/4.gif"></li>
                    <li><img src="../../../images/flight/wallet/ico-bank/5.gif"></li>
                    <li><img src="../../../images/flight/wallet/ico-bank/6.gif"></li>
                    <li><img src="../../../images/flight/wallet/ico-bank/7.gif"></li>
                    <li><img src="../../../images/flight/wallet/ico-bank/8.gif"></li>
                    <li><img src="../../../images/flight/wallet/ico-bank/9.gif"></li>
                    <li><img src="../../../images/flight/wallet/ico-bank/10.gif"></li>
                    <li><img src="../../../images/flight/wallet/ico-bank/11.gif"></li>
                    <li><img src="../../../images/flight/wallet/ico-bank/16.gif"></li>
                </ul>
                <div class="clearfix"></div>
                <div class="mar-top-10 mar-bottom-30 pad-15"
                     style=" width:90%; margin-left:auto; margin-right:auto; border:1px solid #EAE4B5; background-color:#FFFBE7;">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="" class="col-sm-5 control-label">银行卡号</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" placeholder="输入卡号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-sm-5 control-label">姓名</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" placeholder="银行卡开户姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-sm-5 control-label">证件</label>
                            <div class="col-sm-4">
                                <select name="" class="form-control" style="display:inline-block; width:95px;">
                                    <option>身份证</option>
                                    <option>护照</option>
                                    <option>台胞证</option>
                                    <option>港澳通行证</option>
                                    <option>其它</option>
                                </select>
                                <input type="text" class="form-control" style="display:inline-block; width:205px;"
                                       placeholder="输入证件号">
                            </div>

                        </div>
                        <div class="form-group">
                            <label for="" class="col-sm-5 control-label">银行预留手机号</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" placeholder="输入手机号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-sm-5 control-label">短信验证码</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" style=" display:inline-block; width:100px; "
                                       id="" placeholder="输入验证码"> <input type="button" value="免费获取"
                                                                         class="btn btn-primary btn-sm">
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!--list 02-->
            <div class="tab-pane active bank-block-list2" id="tab2">
                <ul id="bank-change2" style=" width:90%; margin-left:auto; margin-right:auto;">
                    <!--<li ><img src="../../../img/wallet/ico-bank/yucunkuan.jpg"></li>-->
                    <li><img src="../../../images/flight/wallet/ico-bank/zhifubao.jpg"></li>
                    <li><img src="../../../images/flight/wallet/ico-bank/weixin.jpg"></li>
                </ul>
                <div class="clearfix"></div>
                <div class="mar-top-10 mar-bottom-30 font16 pad-10"
                     style=" width:90%; margin-left:auto; margin-right:auto; border:1px solid #EAE4B5; background-color:#FFFBE7;">
                    跳转至平台页面支付！
                </div>

            </div>

            <!--list 03-->
            <div class="tab-pane" id="tab3">支付失败
            </div>

        </div>
    </div>
    <!-- 支付选择 结束 -->


    <div class="clearfix"></div>
    <div class="text-center mar-bottom-10">
        <input type="button" value="立即支付" class="btn btn-danger"
               onClick="window.location.href ='pages/flight/Book-online/Payment-successful.jsp';">
    </div>

</div>

<script type="text/javascript">

    $(function () {
        $('.bubbleinfo').each(function () {
            var distance = 10;
            var time = 10;
            var hideDelay = 100;

            var hideDelayTimer = null;

            var beingShown = false;
            var shown = false;
            var trigger = $('.trigger', this);
            var info = $('.popup', this).css('opacity', 0);


            $([trigger.get(0), info.get(0)]).mouseover(function () {
                if (hideDelayTimer) clearTimeout(hideDelayTimer);
                if (beingShown || shown) {
                    // don't trigger the animation again
                    return;
                } else {
                    // reset position of info box
                    beingShown = true;

                    info.css({
                        top: 30,
                        left: 0,
                        display: 'block'
                    }).animate({
                        top: '-=' + distance + 'px',
                        opacity: 1
                    }, time, 'swing', function () {
                        beingShown = false;
                        shown = true;
                    });
                }

                return false;
            }).mouseout(function () {
                if (hideDelayTimer) clearTimeout(hideDelayTimer);
                hideDelayTimer = setTimeout(function () {
                    hideDelayTimer = null;
                    info.animate({
                        top: '-=' + distance + 'px',
                        opacity: 0
                    }, time, 'swing', function () {
                        shown = false;
                        info.css('display', 'none');
                    });

                }, hideDelay);

                return false;
            });
        });
    });


</script>


<script>
    $(document).ready(function () {

        $(".clk01").click(function () {  //组织架构
            layer.open({
                type: 2,
                shift: 2,  //出场动画
                area: ['800px', '60%'],
                title: '组织架构',
                shadeClose: true, //开启遮罩关闭
                content: '../企业客户管理/新组织架构.html'
            });
        });

        $('.zw1').on('click', function () {
            layer.open({
                type: 1,
                title: '修改联系人信息',
                area: ['400px', 'auto'],
                fix: false, //不固定
                maxmin: false,
                content: $('#contact-info'),
            });
        });

        $('.zw2').on('click', function () {  //提交订单弹框
            layer.open({
                type: 1,
                title: '提示',
                area: ['400px', 'auto'],
                fix: false, //不固定
                maxmin: false,
                content: $('#rev'),
            });
        });

    });
</script>
</body>
</html>
